<template>
  <div class="permission" style="height: 100%">
    <div class="left">
      <je-collapse
        v-model:activeKey="activeKey"
        accordion
        expand-icon-position="right"
        :disable-empty-active="true"
        :flex-layout="true"
        @change="(e) => change(e)"
      >
        <je-collapse-panel key="1" header="菜单授权">
          <div class="content">
            <template v-if="topMenus.length > 0">
              <div
                v-for="item in topMenus"
                :key="item.JE_CORE_MENU_ID"
                class="item"
                :class="{ active: currentId === item.JE_CORE_MENU_ID }"
                @click="listItemClick(item.JE_CORE_MENU_ID)"
              >
                <i :class="item.MENU_ICON"></i>&nbsp;&nbsp;&nbsp;{{ item.MENU_MENUNAME }}</div
              >
            </template>
            <je-loading v-if="memuLoading"></je-loading>
          </div>
        </je-collapse-panel>
        <je-collapse-panel key="2" class="function" header="功能授权">
          <div v-if="funcMenus" class="content">
            <div
              v-for="item in funcMenus"
              :key="item.JE_CORE_FUNCINFO_ID"
              class="item"
              :class="{ active: currentId === item.JE_CORE_FUNCINFO_ID }"
              @click="listItemClick(item.JE_CORE_FUNCINFO_ID)"
            >
              <i class="jeicon jeicon-function"></i>&nbsp;&nbsp;&nbsp;{{
                item.FUNCINFO_FUNCNAME
              }}</div
            >
          </div>
        </je-collapse-panel>
      </je-collapse>
    </div>
    <div class="right">
      <div class="top">
        <je-toolbar space="0">
          <je-button type="text" :disabled="btnFlag" @click="save"
            ><i class="fal fa-save"></i><span>保存</span></je-button
          >
          <je-button type="text" :disabled="btnFlag" @click="unfold"
            ><i class="jeicon jeicon-an"></i><span>全部展开</span></je-button
          >
          <je-button type="text" :disabled="btnFlag" @click="packup"
            ><i class="jeicon jeicon-packup"></i><span>全部收起</span></je-button
          >
          <je-button type="text" :disabled="btnFlag" @click="refresh"
            ><i class="jeicon jeicon-refresh"></i><span>刷新数据</span></je-button
          >
        </je-toolbar>
      </div>
      <div class="dynamic-warp">
        <je-tree
          ref="treeview"
          class="table-treeView"
          :search="{ style: 'height:40px;' }"
          :tree-config="{
            trigger: 'cell-dblclick',
            rowField: 'id',
            parentField: 'parent',
            expandAll: true,
          }"
          :checkbox-config="{
            checkField: 'checked',
            checkStrictly: true,
            cascadeChild: true,
            cascadeParent: true,
          }"
          :loading="loading"
          size="mini"
          :data="treeData"
          multiple
          @cell-click="handlerSelect"
        >
        </je-tree>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, onMounted, ref, watch } from 'vue';
  import { Toolbar, Button, Tree, Loading, Collapse, Modal } from '@jecloud/ui';
  import { isEmpty, encode } from '@jecloud/utils';
  import {
    loadTopMenus,
    loadTopFuncs,
    findProductMenuTree,
    findProductFuncTree,
    doGrant,
  } from '@/api/index';

  export default defineComponent({
    name: 'CenterPanel',
    components: {
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeToolbar: Toolbar,
      JeButton: Button,
      JeTree: Tree,
      JeLoading: Loading,
    },
    props: {
      productId: String,
      leftRoleId: String,
    },
    setup(props) {
      // 手风琴的显影项
      const activeKey = ref(['1']);
      // 选中节点的id
      let currentId = ref('');
      const topMenus = ref([]);
      const funcMenus = ref([]);
      const memuLoading = ref(true);
      const treeview = ref();
      const treeData = ref([]);
      let checkedData = [];
      const loading = ref(false);
      const btnFlag = ref(true);
      let meta = 1;
      // 手风琴收缩，确保一个要展开
      const change = (e) => {
        if (!e) {
          if (meta == 1) {
            meta = 2;
          } else if (meta == 2) {
            meta = 1;
          }
          activeKey.value = meta;
        } else {
          meta = activeKey.value;
        }
      };
      onMounted(() => {
        getMenuData();
        getfuncMenuData();
      });
      watch(
        () => props.leftRoleId,
        () => {
          getPowerTreeData();
        },
      );
      // 菜单数据
      const getMenuData = () => {
        memuLoading.value = true;
        loadTopMenus({ productId: props.productId }).then((data) => {
          topMenus.value = data;
          memuLoading.value = false;
        });
      };
      // 功能菜单数据
      const getfuncMenuData = () => {
        loadTopFuncs({ productId: props.productId }).then((data) => {
          funcMenus.value = data;
        });
      };
      // 加载权限树
      const getPowerTreeData = (type) => {
        loading.value = true;
        btnFlag.value = true;
        if (isEmpty(props.leftRoleId) || isEmpty(currentId.value)) {
          treeData.value = [];
          checkedData = [];
          loading.value = false;
          return;
        }
        if (activeKey.value == 1) {
          findProductMenuTree({
            productId: props.productId,
            menuId: currentId.value,
            roleId: props.leftRoleId,
          }).then((data) => {
            afterLoad(data.children, type);
          });
        } else {
          findProductFuncTree({
            productId: props.productId,
            funcId: currentId.value,
            roleId: props.leftRoleId,
          }).then((data) => {
            afterLoad(data.children, type);
          });
        }
      };
      // beforeLoad
      const afterLoad = (data, type) => {
        treeData.value = data;
        setTimeout(() => {
          checkedData = treeview.value.getCheckboxRecords(true);
          const id = treeData.value[0]?.id;
          const row = treeview.value.getRowById(id);
          treeview.value.setTreeExpand(row, true); // 展开
          loading.value = false;
          btnFlag.value = false;
        }, 130);
      };
      // 保存
      const save = () => {
        btnFlag.value = true;
        // 当前选择行数据
        const nowData = treeview.value.getCheckboxRecords(true);
        // 新勾选的数据
        const addArr = nowData.filter((item) => {
          return !checkedData.includes(item);
        });
        // 删除的数据
        const delArr = checkedData.filter((item) => {
          return !nowData.includes(item);
        });
        //封装参数
        const params = {
          productId: props.productId,
          roleId: props.leftRoleId,
          grantType: activeKey.value == '1' ? 'menu' : 'func',
          addedPermStr: '',
          deletedPermStr: '',
        };
        const addedPerm = [],
          deletedPerm = [];
        addArr.forEach((item) => {
          addedPerm.push({ nodeInfoType: item.nodeInfoType, id: item.id });
        });
        delArr.forEach((item) => {
          deletedPerm.push({ id: item.id });
        });
        params.addedPermStr = encode(addedPerm);
        params.deletedPermStr = encode(deletedPerm);
        doGrant(params)
          .then(() => {
            checkedData = treeview.value.getCheckboxRecords(true);
            Modal.notice('保存成功!', 'success');
            btnFlag.value = false;
          })
          .catch((e) => {
            Modal.alert(e.message);
            btnFlag.value = false;
          });
      };
      // 全部展开
      const unfold = () => {
        treeview.value.setAllTreeExpand(true);
      };
      // 全部收起
      const packup = () => {
        treeview.value.clearTreeExpand();
      };
      // 刷新
      const refresh = () => {
        getPowerTreeData();
      };
      // 点击tree的节点
      const handlerSelect = () => {};
      // 点击分组框内的节点
      const listItemClick = (id) => {
        currentId.value = id;
        getPowerTreeData();
      };
      return {
        activeKey,
        change,
        currentId,
        topMenus,
        memuLoading,
        funcMenus,
        save,
        unfold,
        packup,
        refresh,
        treeview,
        treeData,
        loading,
        handlerSelect,
        listItemClick,
        btnFlag,
      };
    },
  });
</script>

<style lang="less" scoped>
  .permission {
    width: 100%;
    height: 100%;
    display: flex;
    .left {
      position: relative;
      width: 300px;
      min-width: 300px;
      height: 100%;
    }
    .right {
      position: relative;
      flex: 1;
      width: 100%;
      height: 100%;
      .top {
        position: absolute;
        width: 100%;
        height: 40px;
        border: 1px solid #e9e9e9;
        z-index: 12;
        border-right: 0;
      }
      .short-mask {
        position: absolute;
        z-index: 11;
        border-left: 1px solid #e9e9e9;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: #fff;
      }
      .dynamic-mask {
        position: absolute;
        z-index: 11;
        border-left: 1px solid #e9e9e9;
        bottom: 0;
        width: 100%;
        background: #fff;
        .word {
          width: 100%;
          padding: 0 10px;
          position: absolute;
          z-index: 9;
          bottom: 10px;
        }
        .dynamic-tip {
          line-height: 25px;
          padding: 5px 10px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          display: -moz-box;
          -moz-line-clamp: 3;
          -moz-box-orient: vertical;
          overflow-wrap: break-word;
          word-break: break-all;
          white-space: normal;
          overflow: hidden;
          border: 1px solid #abd09d;
          background: #eff9f2;
          color: #36761f;
          // height: 60px;
          width: 100%;
        }
      }
      .dynamic-warp {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        padding-top: 40px;
      }
    }
    :deep(.je-panel-wrapper) {
      height: 100% !important;
      width: 100% !important;
    }
    :deep(.je-panel-item-region-default) {
      top: 40px !important;
    }
    .self {
      width: 100%;
    }
    .recover {
      width: 100%;
      :deep(.ant-btn-link) {
        padding: 0 6px;
        color: #a9a9a9 !important;
        &:hover {
          color: #3265f5 !important;
        }
      }
    }
    .active {
      background: @primary-2;
      color: @primary-color !important;
    }
    .content {
      height: 100%;
      // overflow: auto;
      min-height: 560px;
      position: relative;
      .item {
        width: 100%;
        padding-left: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: LEFT;
        color: #333333;
        line-height: 30px;
      }
      .item:hover {
        cursor: pointer;
      }
    }
    .content {
      p:hover {
        cursor: pointer;
      }
    }
    .is--folder {
      color: #ffb04a;
    }
    :deep(.table-treeView .je-panel-wrapper) {
      border-left: 1px solid #e9e9e9;
    }
    .function {
      position: relative;
      border-bottom: 0;
      .bottom {
        position: absolute;
        bottom: 10px;
        right: 10px;
      }
    }
    :deep(.ant-collapse-content-box) {
      background: #ffffff;
    }
    :deep(.ant-collapse) {
      border-left: none;
      border-right: none;
      height: 100%;
    }
    :deep(.ant-collapse-content-box) {
      padding: 0;
    }
    :deep(.je-collapse.je-collapse-flex .ant-collapse-item.ant-collapse-item-active) {
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    :deep(.ant-collapse-item-active .ant-collapse-header) {
      line-height: 28px;
      height: 38.5px;
      padding: 5px 16px;
      background: #f7f9fc;
    }
    :deep(.ant-collapse-header) {
      line-height: 28px;
      height: 38px;
      padding: 5px 16px;
      background: #f7f9fc;
    }
    :deep(.ant-collapse-content-box) {
      height: 100%;
    }
    :deep(.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header) {
      line-height: 30px;
      height: 39px;
      padding: 5px 16px;
      background: #f7f9fc;
    }
    :deep(.ant-collapse.ant-collapse-icon-position-right) {
      border-radius: 0;
    }
    :deep(.table-treeView .je-tree-search-wrapper > *) {
      height: 40px;
      border-top: none;
      border-left: none;
    }
    :deep(.ant-input-affix-wrapper.ant-select-selection-search-input) {
      border-radius: 0;
      border-top: 1px solid #ffffff;
      border-left: 1px solid #ffffff;
      border-right: 0;
      box-shadow: none !important;
      &:hover {
        border-top: 1px solid #5c8dff;
        border-bottom: 1px solid #5c8dff;
        border-left: 1px solid #5c8dff;
        border-right: 1px solid #5c8dff;
      }
    }
    :deep(.ant-input-affix-wrapper-focused.ant-select-selection-search-input) {
      border: 1px solid #5c8dff;
    }
  }
</style>
